<script>
//文本组件工具栏
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import DeleteCard from './DeleteCard.js';

export default {
  name: 'TextToolbar',
  mixins: [DeleteCard],
  props: {
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      itemStyle: {},
      fontSize: 16,
      textAlignModes: [
        {
          key: 'left',
          value: '左对齐',
        },
        {
          key: 'center',
          value: '居中对齐',
        },
        {
          key: 'right',
          value: '右对齐',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    control() {
      return this.controls[this.chartId];
    },
  },
  created() {
    this.itemStyle = this.control.options.style;
    this.fontSize = parseInt(this.itemStyle.fontSize);
  },
  methods: {
    //设置文本样式
    setTextStyle() {
      this.itemStyle.fontSize = `${this.fontSize}px`;
      this.commitStyle();
    },
    // 设置粗体
    setFontWeight() {
      this.itemStyle.fontWeight === 'normal'
        ? (this.itemStyle.fontWeight = 'bold')
        : (this.itemStyle.fontWeight = 'normal');
      this.commitStyle();
    },
    // 设置斜体
    setFontStyle() {
      this.itemStyle.fontStyle === 'normal'
        ? (this.itemStyle.fontStyle = 'italic')
        : (this.itemStyle.fontStyle = 'normal');
      this.commitStyle();
    },
    // 设置下划线
    setTextDecoration() {
      this.itemStyle.textDecoration === 'none'
        ? (this.itemStyle.textDecoration = 'underline')
        : (this.itemStyle.textDecoration = 'none');
      this.commitStyle();
    },
    // 更改样式
    commitStyle() {
      this.control.options.style = this.itemStyle;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
  },
};
</script>
<template>
  <div class="text-item-toolbar">
    <div>
      <Tooltip
        content="设置字体大小"
        placement="top"
        transfer>
        <InputNumber
          v-model="fontSize"
          size="small"
          @on-change="setTextStyle"></InputNumber>
      </Tooltip>
      <Tooltip
        content="字体加粗"
        placement="top"
        transfer>
        <SvgIcon
          icon-class="bold"
          size="12"
          @click.native.stop="setFontWeight"/>
      </Tooltip>
      <Tooltip
        content="斜体"
        placement="top"
        transfer>
        <SvgIcon
          icon-class="italic"
          size="12"
          color="#666"
          @click.native.stop="setFontStyle" />
      </Tooltip>
      <Tooltip
        content="下划线"
        placement="top"
        transfer>
        <SvgIcon
          icon-class="underline"
          size="12"
          color="#666"
          @click.native.stop="setTextDecoration" />
      </Tooltip>
      <Tooltip
        content="设置字体颜色"
        placement="top"
        transfer>
        <ColorPicker
          v-model="itemStyle.color"
          size="small"
          transfer
          @on-change="setTextStyle"/>
      </Tooltip>
      <Poptip
        placement="bottom"
        transfer>
        <Icon
          type="navicon-round"
          title="文本对齐方式"
          size="16" />
        <div slot="content">
          <RadioGroup
            v-model="itemStyle.textAlign"
            @on-change="setTextStyle">
            <Radio
              v-for="item in textAlignModes"
              :key="item.key"
              :label="item.key">
              {{ item.value }}
            </Radio>
          </RadioGroup>
        </div>
      </Poptip>
      <Tooltip
        content="设置填充颜色"
        placement="top"
        transfer>
        <ColorPicker
          v-model="itemStyle.background"
          size="small"
          transfer
          @on-change="setTextStyle"/>
      </Tooltip>
      <Tooltip
        content="全屏"
        placement="top"
        transfer>
        <Icon
          type="android-expand"
          size="16"/>
      </Tooltip>
      <Tooltip
        content="删除"
        placement="top"
        transfer>
        <Icon
          type="close"
          size="16"
          @click.native.stop="deleteCard" />
      </Tooltip>
    </div>
  </div>
</template>

<style lang="less">
.text-item-toolbar {
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
  cursor: default;
  .k-icon {
    color: #666666;
    font-size: 18px;
    margin: 0 2px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .k-tooltip {
    margin: 0 2px;
    cursor: pointer;
  }
  .k-poptip-body-content {
    overflow-y: hidden;
  }
  .k-input-number-small {
    width: 55px;
  }
}
</style>
